<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";
// import {handleCurrentChange} from "element-plus/es/components/tree/src/model/util";

// 分页参数
const size = ref("default");
let pageNum = ref(1);
let pageSize = ref(5);
let total = ref(1);
const currentPage = ref(1);

let flag = ref(false);

const sid = ref('')
const sname = ref('')

let title=ref('');
let editEnable = ref(false);
const fromdata = ref({
})



const allData = ref([

])
let tableData = ref([])

  onMounted(()=>{
    fetchData();
  })
const showStudentInfo=()=>{
  console.log(sid.value);
  console.log(sname.value);
  fetchData();

}
const fetchData = () => {
  axios
      .get("/api/admin/expertiseField", {
        params: {
          pageNum: pageNum.value,
          pageSize: pageSize.value,
          sid: sid.value,
          sname: sname.value,
        },
      })
      .then((resp) => {
        const pageInfo = resp.data.data;
        //列表数据
        tableData.value = pageInfo.list;
        //分页条
        total.value = pageInfo.total;
        pageSize.value = pageInfo.pageSize;
        pageNum.value = pageInfo.pageNum;
      });
};

const  confirmOptions= ()=>{
  flag.value=false;

  if(title.value=='编辑'){
    axios.put('/api',fromdata.value)
        .then((resp)=>{
          console.log(resp);
          fetchData();
        })
  }

  if(title.value=='新增'){

    axios.post("/api",fromdata.value)
        .then((resp)=>{
          fetchData();
        })
  }
}

const deleteInfo=(id)=>{
  axios.delete("/api/admin/"+id).then((resp)=>{
    console.log(resp);
    fetchData();
  });
}

const showStudentInfoAdd=()=>{
  flag.value=true;
  fromdata.value={};
  editEnable.value=false;
  title.value="新增";
}
const showStudentInfoEdit = (row) => {
  flag.value=true;
  fromdata.value=row;
  console.log(fromdata.value);

  editEnable.value=false;
  title.value="编辑";
}
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  fetchData();
};

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  currentPage.value = 1; // 重置为第一页
  fetchData();
};





</script>

<template>
  <!-- 假设后端运行在 http://localhost:8080 -->
  <label >ID：</label>
  <el-input v-model="sid" style="width: 240px" placeholder="Please input" />
  <label>擅长领域：</label>
  <el-input v-model="sname" style="width: 240px" placeholder="Please input" />
  <el-button type="info" @click="showStudentInfo">搜索</el-button>
<div>
  <el-button type="info" @click="showStudentInfoAdd">新增</el-button>

</div>


  <el-table :data="tableData" height="80%" style="width: 100% ;">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="fieldName" label="擅长领域" width="180" />
    <el-table-column label="操作" width="250" align="center">
      <template #default="scope">
        <div style="display: flex;justify-content: center">
        <el-button type="info" @click="showStudentInfoEdit(scope.row)">编辑</el-button>
        <el-button type="info" @click="deleteInfo(scope.row.id)">删除</el-button
        >
          </div>
      </template>
    </el-table-column>
  </el-table>
<!--分页-->
  <div id="page_div">
    <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[2, 3, 5, 10]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>


    <el-dialog v-model="flag" :title="title" width="500" align-center>
      <div>
        <div>
          <label >ID:</label>
          <el-input
              v-model="fromdata.id"
              style="width: 240px;margin-left: 20px"
              placeholder="请输入"
              :readonly="editEnable"
          />
        </div>
        <div>
          <label>擅长领域:</label>
          <el-input
              v-model="fromdata.fieldName"
              style="width: 240px;margin-right: 20px"
              placeholder="请输入"
              :readonly="editEnable"
          />
        </div>

      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="flag = false">取消</el-button>
          <el-button type="primary" @click="confirmOptions">确定</el-button>
        </div>
      </template>
    </el-dialog>


</template>

<style scoped>

</style>
